<template>
    <div>
        <el-menu class="el-menu-vertical-demo">
            <el-sub-menu  :index="(index+1).toString()" v-for="(item,index) in navlist" :key="index">
                
                <template #title >
                    <el-icon v-if="index == 0 "><Basketball /></el-icon>
                    <el-icon v-else-if="index == 1 "><Promotion /></el-icon>
                    <el-icon v-else-if="index == 2 "><Burger /></el-icon>
                    <el-icon v-else-if="index == 3 "><MilkTea /></el-icon>
                    <el-icon v-else-if="index == 4 "><Fries /></el-icon>
                    <span>{{item.catagory}}</span>
                </template>
                    <el-menu-item  :index="((index+1) + '-' + (i+1)).toString()" v-for="(list,i) in item.list" :key="i" @click=clickHandle(list.cid)>{{ list.name }}</el-menu-item>
            </el-sub-menu>
        
        </el-menu>
    </div>
</template>

<script>
import axios from 'axios';
// import MyHome from '../MyHome.vue';
import {Promotion,Burger,Basketball,MilkTea,Fries} from '@element-plus/icons-vue'
export default {

    mounted(){
        axios.get('navlist.json').then(res=>{
            this.navlist=res.data.navlist
        })
    },
    data(){
        return{
            navlist:[]
        }
    },
    components:{
        Promotion,
        Burger,
        Basketball,
        MilkTea,
        Fries
    },
    methods: {
        clickHandle(cid){
            this.$emit('handle',cid)
        }
    },
}
</script>